<template>

    <div>
        <!-- 班次计划查询 -->
        <!--座位明细-->
        <div class="seatdetail">
            <div class="title">座位信息</div>
            <div v-for="item in busseatlist">
                <div :id="item.stname==null?'seatinfo':'seatinfo_have'" @click="billinfo(item.tbc_id)">
                    {{item.seat_idx}}　{{item.stname}}　{{item.tks_type}}　{{item.tks_price}}
                </div>
                <hr color="#d5ebe9"/>
            </div>
        </div>
        <div class="container">
            <!-- 表单 -->
            <el-row>
                <el-col>
                    <el-form :inline="true" :model="formList" class="ticketForm" id="scheduleEnquiry">
                        <el-col :span="6">
                            <el-form-item label="班次日期">
                                <el-date-picker type="date" size="mini" class="minipt"
                                                v-model="formList.startDate"
                                                value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="班次号">
                                <el-input size="mini" v-model="formList.busid" class="inp"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="线路" class="minisel">
                                <el-select size="mini" clearable v-model="formList.roadname">
                                    <el-option
                                            v-for="item in roadlist"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="到站">
                                <el-autocomplete v-model="formList.endstation" size="mini"
                                                 :fetch-suggestions="querySearchendstations">
                                </el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="班次状态" class="minisel">
                                <el-select v-model="formList.busstaus" size="mini" clearable>
                                    <el-option
                                            v-for="item in busStatusList"
                                            :key="item.key"
                                            :label="item.value"
                                            :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="　加班" class="minisel">
                                <el-select size="mini" v-model="formList.otbus" clearable>
                                    <el-option
                                            v-for="item in isotlist"
                                            :key="item.key"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <button class="check-btn rf" type="button" @click="check">
                            <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                        </button>
                    </el-form>
                </el-col>
            </el-row>

            <!-- 表格 -->
            <el-table height="600px" show-summary :summary-method="getSummaries" style="width: 100%" :data="tableData"
                      :default-sort="{prop:'bustime', order:'ascending'}" @row-click="busplaninfo" @row-contextmenu="seatlayoutinfo"
                      :row-class-name="tableRowClassName" :row-style="selectedHighlight">
                <el-table-column type="index" label="序号">
                    <template scope="scope"><span>{{scope.$index+(nowpagenumb - 1) * nowpagesize + 1}} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="line_name" label="线路"></el-table-column>
                <el-table-column prop="bus_id" label="班次号"></el-table-column>
                <el-table-column prop="bus_date" label="班次日期" width="120"></el-table-column>
                <el-table-column prop="bus_time" sortable label="时间"></el-table-column>
                <el-table-column prop="statusname" label="状态" min-width="50px"></el-table-column>
                <el-table-column prop="all_seat" label="总座位"></el-table-column>
                <el-table-column prop="seatcount" label="可售座位"></el-table-column>
                <el-table-column prop="cansalecount" label="余票" min-width="50px"></el-table-column>
                <el-table-column prop="salecount" label="已售" min-width="50px"></el-table-column>
                <el-table-column prop="enfantcount" label="免童" min-width="50px"></el-table-column>
                <el-table-column prop="fact_vehi_no" label="报班车牌"></el-table-column>
                <el-table-column prop="baoban_oper" label="报班工号"></el-table-column>
                <el-table-column prop="baoban_time" label="报班时间" width="160"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[10,50, 200, 500]"
                        :page-size="50"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total='this.totalrows'
                        background>
                </el-pagination>
            </div>
            <!-- 票价明细 -->
            <div class="moenyDetail">
                <div class="title">票价明细</div>
                <!-- 表格 -->
                <el-table height="250px" :data="data_list" fit="false">
                    <el-table-column type="index"></el-table-column>
                    <el-table-column prop='st_name' label="站点" width="100px"></el-table-column>
                    <el-table-column prop="max_price" label="上限价" width="100px"></el-table-column>
                    <el-table-column prop="surcharges" label="附加费" width="100px"></el-table-column>
                    <el-table-column prop="is_valid" label="是否启用" width="100px"></el-table-column>
                    <el-table-column prop="pricename.prop" :label="pricename.value"
                                     v-for="pricename in pricenamelist">
                        <template scope="scope">
                            {{data_list[scope.$index][pricename.prop]}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!--遮罩层-->
        <div class='popContainer' v-show="modelShow"></div>
        <!--车票弹窗-->
        <div class="management-modal-win" v-show="modelShow">
            <!-- 标题 -->
            <el-row>
                <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">{{modalTitle}}</div>
                    <div class="rf close" @click="closeModual()">X</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="msg-win">
                        <div v-html="htmltks"></div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 右键菜单 -->
        <div v-show="rightShow">
            <ul>
                <li>{{1}}</li>
                <li @click ="">修改</li>
                <li @click ="">删除</li>
            </ul>
        </div>


    </div>
</template>
<script>
    import "../../assets/js/jquery.js";
    import qs from "qs";

    export default {
        data() {
            return {
                modelShow: false,
                modalTitle: "",
                htmltks:"",
                rightShow:false,

                data_list: [],
                pricebilllist: [],
                roadlist: [],
                endstationslist: [],
                busStatusList: [],
                isotlist: [
                    {
                        value: '',
                        label: '不限',
                    },
                    {
                        value: '1',
                        label: '是',
                    },
                    {
                        value: '0',
                        label: '否',
                    }
                ],
                formList: {
                    startDate: "",
                    busid: "",
                    roadname: "",
                    endstation: "",
                    busstaus: "",
                    otbus: "",
                },
                nowtoday: "",
                totalrows: "",
                endstationid: "",
                tableData: [],
                pricenamelist: [],
                busseatlist: [],
                nowpagesize: "",
                nowpagenumb: "",
                controllernumb: "",
                getIndex: "",
            };
        },
        methods: {
            //下拉提示框回调
            createFilter(queryString) {
                return arr => {
                    return arr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
                };
            },
            //线路列表
            loadroadlist() {
                this.$http
                    .post("/sch/data/line/listWithSpell")
                    .then(data => {
                        this.roadlist = data.data;
                    })
            },
            //班次状态列表
            loadbusPlanType() {
                this.$http
                    .post("/sch/data/common/busstatus")
                    .then(data => {
                        this.busStatusList = data.data;
                    })
            },
            //到站点自动补全
            querySearchendstations(queryString, cb) {
                var arr = this.endstationslist;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //到站点请求
            loadRoadEnd() {
                var arr = [];
                this.$http
                    .post("/sch/data/station/listWithSpell")
                    .then(data => {
                        for (var e of data.data) {
                            arr.push({value: e.name, prop: e.id});
                        }
                        console.log(arr);
                    });
                return arr;
            },
            //查询
            check() {
                let pagerows = (this.nowpagesize == "") ? 50 : this.nowpagesize;
                let pagenumb = (this.nowpagenumb == "") ? 1 : this.nowpagenumb;
                this.controllernumb = 1;
                this.$http
                    .post(
                        "/query/busplan/detail/list",
                        qs.stringify({
                            filterRules: '[{"field":"bus_plan.bus_date","op":"eq","value":"' + this.formList.startDate + '"},' +
                                '{"field":"bus_plan.bus_id","op":"eq","value":"' + this.formList.busid + '"},' +
                                '{"field":"bus_plan.line_id","op":"eq","value":"' + this.formList.roadname + '"},' +
                                '{"field":"bus_plan_price.st_id","op":"eq","value":"' + this.endstationid + '"},' +
                                '{"field":"bus_plan.status_id","op":"eq","value":"' + this.formList.busstaus + '"},' +
                                '{"field":"bus_plan.is_ot","op":"eq","value":"' + this.formList.otbus + '"}]',
                            page: pagenumb,
                            rows: pagerows,
                        })
                    )
                    .then(data => {
                        this.tableData = data.data.list;
                        this.totalrows = data.data.totalRow;
                        this.nowpagesize = data.data.pageSize;
                        this.nowpagenumb = data.data.pageNumber;
                    });
            },
            //加载列表
            getbusplanlist() {
                let pagerows = (this.nowpagesize == "") ? 50 : this.nowpagesize;
                let pagenumb = (this.nowpagenumb == "") ? 1 : this.nowpagenumb;
                this.$http
                    .post(
                        "/query/busplan/detail/list",
                        qs.stringify({
                            filterRules: '[{"field":"bus_plan.bus_date","op":"eq","value":"' + this.nowtoday + '"}]',
                            page: pagenumb,
                            rows: pagerows,
                        })
                    )
                    .then(data => {
                        console.log(data);
                        this.tableData = data.data.list;
                        this.totalrows = data.data.totalRow;
                        this.nowpagesize = data.data.pageSize;
                        this.nowpagenumb = data.data.pageNumber;
                    });
            },
            //时间处理,获取当天时间
            todayfunction() {
                let now = new Date();
                var nowday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
                this.nowtoday = nowday;
                this.formList.startDate = nowday;
            },
            //票价明细列表
            getpricelist(rowid) {
                this.$http
                    .post(
                        "/query/busplan/detail/pricePage",
                        qs.stringify({
                            bus_plan_id: rowid,
                        })
                    )
                    .then(data => {
                        this.data_list = data.data.list;
                        console.log(this.data_list);
                    });
            },
            //座位信息列表
            getseatlist(rowid) {
                this.$http
                    .post(
                        "/sch/bus/plan/seat/list",
                        qs.stringify({
                            bus_plan_id: rowid
                        })
                    )
                    .then(data => {
                        console.log(data.data);
                        this.busseatlist = data.data;
                    })
            },
            //座位号对应的票明细
            billinfo(tbcid) {
                this.modelShow = true;
                this.modalTitle = "车票明细";
                this.$http
                    .post(
                        "/boarding/credential/detailPage",
                        qs.stringify({
                            id: tbcid,
                        })
                    )
                    .then(data => {
                        if(data.data.length ==2){
                            this.htmltks = "该车票未取票，未生成票信息";
                        }else{
                            this.htmltks = data.data;
                        }
                    })
            },
            //点击数据，加载对应的票价列表、座位列表、改变行颜色
            busplaninfo(row) {
                this.getIndex = row.index;
                this.getpricelist(row.id);
                this.getseatlist(row.id);
            },
            seatlayoutinfo(row){
                this.busplaninfo(row);
                this.rightShow = true;

            },
            //选中行颜色变化
            selectedHighlight({row, rowIndex}) {
                if ((this.getIndex) === rowIndex) {
                    return {
                        "background-color": "#C1C1C1 !important"
                    };
                }
            },
            //把每一行的索引放进row
            tableRowClassName({row, rowIndex}) {
                row.index = rowIndex;
            },
            //获取票名
            getpricename() {
                this.$http
                    .post("/tks/type/all")
                    .then(data => {
                        console.log(data.data);
                        for (var item of data.data) {
                            this.pricenamelist.push({value: item.name, prop: 'type_' + item.id})
                        }
                    })
            },
            //关闭弹窗
            closeModual() {
                this.modelShow = false;
            },
            //合计函数
            getSummaries(param) {
                const {columns, data} = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总价';
                        return;
                    }
                    if (index === 2) {
                        sums[index] = ' ';
                        return;
                    }
                    if (index === 11) {
                        sums[index] = ' ';
                        return;
                    }
                    if (index === 12) {
                        sums[index] = ' ';
                        return;
                    }
                    if (index === 13) {
                        sums[index] = ' ';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' ';
                    } else {
                        sums[index] = ' ';
                    }
                });
                return sums;
            },
            //pageSize变化事件
            handleSizeChange(val) {
                console.log(val);
                this.nowpagesize = val;
                if (this.controllernumb == 1) {
                    this.check();
                } else {
                    this.getbusplanlist();
                }
            },
            //pageNum变化事件
            handleCurrentChange(val) {
                console.log(val);
                this.nowpagenumb = val;
                if (this.controllernumb == 1) {
                    this.check();
                } else {
                    this.getbusplanlist();
                }
            },
        },
        watch: {
            //侦听到站点，获取其id
            "formList.endstation": {
                handler(curVal, oldVal) {
                    console.log(curVal, oldVal);
                    if (this.formList.endstation == "") {
                        this.endstationid = "";
                    } else {
                        for (var item of this.endstationslist) {
                            if (this.formList.endstation == item.value) {
                                this.endstationid = item.prop;
                                break;
                            } else {
                                this.endstationid = "";
                            }
                        }
                        console.log(this.endstationid)
                    }
                },
                deep: true
            },
        },
        mounted() {
            console.log("班次计划查询");
            this.loadroadlist();
            this.endstationslist = this.loadRoadEnd();
            this.busStatusList = this.loadbusPlanType();
            this.todayfunction();
            this.getbusplanlist();
            this.getpricename();

        },
    }
</script>
<style scoped src="../../assets/css/check/scheduleEnquiry.css">
</style>
